<template>
  <div class="cover">
    <h3 v-if="bookdata.obj !== null">{{ bookdata.obj.book_title }}评论区</h3>
    <div class="newcom">
      <textarea
        cols="20"
        rows="5"
        type="text"
        placeholder="评论"
        v-model.trim="data.comment_content"
      />
      <button @click="putOneComment">提交评论</button>
    </div>
    <div class="cover_title">
      <p class="allcom">
        全部评价( <strong>{{ allcomment.count }}</strong> )条
      </p>
      <select v-model="ishot" @change="handleHot(e)">
        <option value="false">按时间</option>
        <option value="true">按热度</option>
      </select>
    </div>
    <div class="item" v-for="item in allcomment.list" :key="item._id">
      <div class="left">
        <img :src="`${$store.state.baseurl}userheader/1.png`" alt="头像" />
        <span> {{ item.push_user_id.username }} </span>
        <span v-if="item.er_arr.length != 0">
          回复数：{{ item.er_arr.length }}
        </span>
      </div>
      <div class="right">
        <p class="star">
          <i class="iconfont">*</i>
          <i class="iconfont">*</i>
          <i class="iconfont">*</i>
          <i class="iconfont">*</i>
          <i class="iconfont">*</i> <i class="iconfont"></i>
        </p>
        <p class="louzhu">{{ item.comment_content }}</p>
        <!-- <h1>
    {{}}
  </h1> -->
        <p class="huifu">
          <span>
            {{ dateFate(item.push_time) }}
          </span>
          <i
            @click="
              setComment(
                item.up_number.indexOf($store.state.userdata._id),
                1,
                item
              )
            "
            :class="[
              'iconfont',
              'icon-zan',
              item.up_number.indexOf($store.state.userdata._id) != -1
                ? 'active'
                : '',
            ]"
            >赞({{ item.up_number.length }})</i
          >
          <i
            @click="
              setComment(
                item.lower_number.indexOf($store.state.userdata._id),
                2,
                item
              )
            "
            :class="[
              'iconfont',
              'icon-cai',
              item.lower_number.indexOf($store.state.userdata._id) != -1
                ? 'active'
                : '',
            ]"
            >踩({{ item.lower_number.length }})</i
          >

          <i
            class="iconfont icon-huifu"
            @click="handleReply(item)"
            v-if="item.push_user_id._id != $store.state.userdata._id"
            >回复</i
          >
          <i
            @click="handleDelComent(item)"
            class="iconfont icon-chehuisekuai"
            v-else
            >撤回</i
          >
        </p>
        <!-- 这是回复的评论列表 -->
        <ul style="padding-left: 50px" v-if="item.er_arr != []">
          <li v-for="item1 in item.er_arr" :key="item1._id">
            <p class="li-headere">
              {{ item1.push_user_id.username }} 回复
              {{ item1.push_usered_id.username }}：
            </p>
            <p class="li_content">
              {{ item1.comment_content }}
            </p>
            <p class="huifu">
              <span>
                {{ dateFate(item1.push_time) }}
              </span>

              <i
                @click="
                  setComment(
                    item1.up_number.indexOf($store.state.userdata._id),
                    1,
                    item1
                  )
                "
                :class="[
                  'iconfont',
                  'icon-zan',
                  item1.up_number.indexOf($store.state.userdata._id) != -1
                    ? 'active'
                    : '',
                ]"
                >赞({{ item1.up_number.length }})</i
              >
              <i
                @click="
                  setComment(
                    item1.lower_number.indexOf($store.state.userdata._id),
                    2,
                    item1
                  )
                "
                :class="[
                  'iconfont',
                  'icon-cai',
                  item1.lower_number.indexOf($store.state.userdata._id) != -1
                    ? 'active'
                    : '',
                ]"
                >踩({{ item1.lower_number.length }})</i
              >
              <i
                class="iconfont icon-huifu"
                v-if="item1.push_user_id._id != $store.state.userdata._id"
                @click="handleReply1(item1)"
                >回复</i
              >
              <i
                @click="handleDelComent(item1)"
                class="iconfont icon-chehuisekuai"
                v-else
                >撤回</i
              >
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import {
  sendComent,
  getallcomments,
  getBook,
  delComment,
  handlePl,
} from "../../api/data";
import moment from "moment";

export default {
  setup() {
    const store = useStore();
    const route = useRoute();
    let book_id = route.query.book_id;
    let userdata = store.state.userdata;
    const ishot = ref("false");
    const bookdata = reactive({
      obj: null,
    });
    const data = reactive({
      book_id,
      comment_content: "",
      push_user_id: "",
      isOne: true,
    });

    const allcomment = reactive({
      list: [],
      count: 0,
    });

    // 处理时间的函数
    function dateFate(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
      return moment(dataStr).format(pattern);
    }

    onMounted(async () => {
      // 通过book_id获取书本的基本信息
      let data2 = await getBook({
        id: book_id,
      });
      bookdata.obj = data2.data;

      // 获取这本书的全部评论
      getALLcom();
    });

    // 点赞和踩
    const setComment = async (iszan, index, item) => {
      // console.log(iszan, index);
      if (userdata == null) {
        return alert("请先登陆！！！！");
      }
      // console.log(iszan, index);
      // iszan(-1 表示中立 ||  其他 表示原来有选)
      // index(1赞 || 2踩)
      if (iszan == -1) {
        // 原来是中立
        if (index == 1) {
          // 提交点赞
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: userdata._id,
            isZan: 1,
          });
          // console.log(data1.msg);
        } else if (index == 2) {
          // 提交踩
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: userdata._id,
            isZan: 2,
          });
          // console.log(data1.msg);
        }
      } else {
        // 原来是赞/踩
        if (index == 1) {
          // 取消赞
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: userdata._id,
            isZan: 0,
          });
          // console.log(data1.msg);
        } else if (index == 2) {
          // 取消踩
          let data1 = await handlePl({
            comment_id: item._id,
            user_id: userdata._id,
            isZan: 0,
          });
          // console.log(data1.msg);
        }
      }
      // 获取这本书的全部评论
      getALLcom();
    };

    // 回复二级评论
    const handleReply1 = async (item) => {
      // console.log(item);
      if (userdata == null) {
        return alert("请先登陆！！！！");
      }
      if (data.comment_content.length == 0) {
        return alert("评论内容不能为空");
      }
      data.push_user_id = userdata._id;
      let data1 = await sendComent({
        isOne: false,
        comment_content: data.comment_content,
        book_id,
        push_user_id: data.push_user_id,
        comment_id: item._id,
        push_usered_id: item.push_user_id._id,
        zhu_id: item.zhu_id,
      });
      // console.log(data1);

      // // 获取这本书的全部评论

      getALLcom();
    };
    // 获取这本书的全部评论
    async function getALLcom() {
      let data3 = await getallcomments({
        book_id,
        ishot:ishot.value,
      });
      console.log(data3)

      allcomment.list = data3.data;
      allcomment.count = data3.count;
    }

    // 回复楼主评论
    const handleReply = async (item) => {
      // console.log(item);
      if (userdata == null) {
        return alert("请先登陆！！！！");
      }
      if (data.comment_content.length == 0) {
        return alert("评论内容不能为空");
      }
      data.push_user_id = userdata._id;
      let data1 = await sendComent({
        isOne: false,
        comment_content: data.comment_content,
        book_id,
        push_user_id: data.push_user_id,
        comment_id: item._id,
        push_usered_id: item.push_user_id._id,
        zhu_id: item._id,
      });
      // console.log(data1);

      // 获取这本书的全部评论
      getALLcom();
    };

    // 作为楼主发布评论
    const putOneComment = async () => {
      if (userdata == null) {
        return alert("请先登陆！！！！");
      }
      if (data.comment_content.length == 0) {
        return alert("评论内容不能为空");
      }
      data.push_user_id = userdata._id;
      // console.log;
      let data1 = await sendComent(data);
      // console.log(data1);

      // 获取这本书的全部评论
      getALLcom();
    };

    // 删除自己的评论
    const handleDelComent = async (item) => {
      if (userdata == null) {
        return alert("请先登陆！！！！");
      }
      let { _id } = item;
      // comment_id,user_id

      let data1 = await delComment({
        comment_id: _id,
        user_id: userdata._id,
        isOne: item.isOne,
      });

      // 获取这本书的全部评论
      getALLcom();
    };

    //切换时间和热度排序
    const handleHot = async (e) => {
      getALLcom()
    };
    return {
      ishot,
      handleHot,
      data,
      putOneComment,
      allcomment,
      handleReply,
      bookdata,
      dateFate,
      handleReply1,
      handleDelComent,
      setComment,
    };
  },
};
</script>

<style lang="scss" scoped>
.cover {
  margin-top: 20px;
  border: 3px solid #c3dfea;
  padding: 15px;
  padding-top: 0px;
  h3 {
    text-align: center;
    height: 70px;
    line-height: 70px;
    color: #333;
    border-bottom: 1px dashed #369;
  }
  .newcom {
    padding: 15px 0;
    min-height: 60px;
    display: flex;
    align-items: flex-end;
    textarea {
      outline: none;
      background-color: none;
      border: none;
      min-width: 600px;
      font-size: 14px;
      padding: 5px;
      color: #666;
    }

    button {
      cursor: pointer;
      margin-left: 20px;
      height: 40px;
      padding: 0px 15px;
    }
  }

  .cover_title {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p.allcom {
      font-size: 14px;
      color: #333;
    }

    select {
      color: #666;
      font-size: 14px;
      option {
        color: #666;
      }
    }
  }

  .item {
    padding: 15px;
    background-color: #fff;
    margin-top: 20px;
    display: flex;
    border-bottom: 1px solid #999;
    .left {
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      span {
        white-space: nowrap;
        margin-top: 10px;
      }
    }

    .right {
      padding-left: 15px;
      width: 100%;
      p.star {
        height: 30px;
        i.iconfont {
        }
      }

      p.louzhu {
        line-height: 30px;
        font-size: 14px;
      }

      p.huifu {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        i {
          margin-right: 20px;
        }
        span {
          margin-right: 20px;
        }

        i.iconfont {
        }
      }

      ul {
        margin-top: 20px;
        border-top: 2px solid #369;
        li {
          padding: 15px 0;
          border-bottom: 1px solid #369;
          p {
            line-height: 30px;
          }
          p.li-headere {
          }

          p.li_content {
          }

          p.li_time {
          }

          p.huifu {
            i {
            }
          }
        }
      }
    }
  }
}
.active {
  color: red !important;
}
i {
  cursor: pointer;
}
</style>